<template>
  <div class="main">
    <div>
      <router-view />
    </div>

    
    <van-tabbar v-model="activeIndex" route>
      <van-tabbar-item
        v-for="(item, index) in tabbarArr"
        :key="index"
        :to="item.path"
        :badge="item.badge > 0 ? item.badge : ''"
        :dot="item.dot > 0 ? '' : item.dot">
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import '../assets/less/main.less'
import { mapState, mapMutations } from "vuex";
export default {
  name: "Main",
  data() {
    return {
      activeIndex: 0,
    };
  },
  computed:{
    ...mapState(['shopbagCount',"loadShopbagCount"]),

    tabbarArr(){
      return [
        {
          icon: {
            active: require("../assets/images/home_active.png"),
            inactive: require("../assets/images/home.png"),
          },
          path: "/home",
        },
        {
          icon: {
            active: require("../assets/images/menu_active.png"),
            inactive: require("../assets/images/menu.png"),
          },
          path: "/menu",
        },
        {
          icon: {
            active: require("../assets/images/shopbag_active.png"),
            inactive: require("../assets/images/shopbag.png"),
          },
          path: "/shopbag",
          badge: this.shopbagCount,
        },
        {
          icon: {
            active: require("../assets/images/my_active.png"),
            inactive: require("../assets/images/my.png"),
          },
          path: "/myself",
          dot:1,
        },
      ]
    }
  },
  created() {
    this.getShopbagCount();
  },
  methods: {
    ...mapMutations(["shopbagChange","loadShopbagCountChange"]),
    getShopbagCount(){
      if(this.loadShopbagCount){
        console.log('Main已经加载过购物袋数量,不再请求');
        return
      }

      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString){
        console.log("浏览器token不存在");
        return;
      }
      this.$toast.loading({
        message:"加载中...",
        forbidClick:true,
        duration:0,
      });
      this.axios({
        method:"GET",
        url: this.baseUrl + "/shopcartRows",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      }).then((res)=>{
        // console.log("res getShopcartCount ==>",res);
        this.$toast.clear();

        if( res.data.code == 700){
          return;
        }

        if( res.data.code === 8000 ){
          this.shopbagChange(res.data.result);

          this.loadShopbagCountChange(true);
        }
      }).catch((err)=>{
        this.$toast.clear();
        console.log(err);
      })
    }
  },
};
</script>
